<template>
  <div class="riskPoint">
    <div class="tabr-nav-title">
      <van-nav-bar
        title="风险点位管理"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell
          :title="item.title"
          is-link
          v-for="item in list"
          :key="item.title"
          class="content-title"
          @click="goPath(item)"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

const list = ref([
  {
    title: "待识别点位管理",
    path: "/pointManagement",
    state: "identify",
  },
  {
    title: "已入库点位管理",
    path: "/pointManagement",
    state: "enter",
  },
  {
    title: "待退库点位管理",
    path: "/pointManagement",
    state: "enter",
  },
  {
    title: "已退库点位管理",
    path: "/pointManagement",
    state: "enter",
  },
]);
const goPath = (item) => {
  router.push({
    path: item.path,
    query: {
      status: item.id,
      title: item.title,
    },
  });
};
const onClickLeft = () => history.back();
</script>

<style scoped lang="less">
.riskPoint {
  height: 100vh;
  background: #f7f8f7;

  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 44px;
    font-size: 18px;
    color: #29292c;
    text-align: center;
    font-style: normal;
    background: #fff;
    width: 100vw;
  }
  .content {
    margin-top: 10px;
    background: #fff;
    width: 100vw;
    .content-title {
      height: 50px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f7f8f7;
    }
  }
}
</style>
